<template>
	<view class="player" v-if="player2">
		<view class="user_info">
			<image :class="{'current':player2.isCurrent}" src="../../static/logo.png"></image>
			<view class="user_text">
				<text class="score">100000</text>
				<text class="username">player2</text>
			</view>
		</view>
		<view :style="{'width':player2.buffer.length*upx2px(20)+upx2px(50)+'px'}" class="bufferlist" v-if="player2">
			<image @click.stop="chooseCard(v,i)" :style="cardStyle(v,i)" class="card" v-for="(v,i) in player2.buffer" :key="i" :src="`/static/pkp/${v.type}_${v.value}.jpg`"></image>
		</view>
		<view v-if="player2.buffer[0]&&player2.buffer[0].value=='不出'" class="bufferlist">
			<text>不出</text>
		</view>
		<view class="control_wrap" v-if="player1&&player3">
			<!-- 计时器 -->
			<timer class="timer" @timeout="timeout" v-if="player2.isCurrent&&!isChooseLandlord" />
			<!-- 叫分 -->
			<view v-if="isChooseLandlord&&player2.isCurrent" class="scores">
				<button style="background-color: #F0AD4E;" @click="sendScore(0)" size="mini">不叫</button>
				<button v-if="currentScore<1" @click="sendScore(1)" size="mini" type="warn">1分</button>
				<button v-if="currentScore<2" @click="sendScore(2)" size="mini" type="default">2分</button>
				<button @click="sendScore(3)" size="mini" type="primary">3分</button>
			</view>
			<!-- 出牌 -->
			<view v-if="!isChooseLandlord&&player2.isCurrent" class="controls">
				<button v-show="(player1.buffer.length&&player1.buffer[0].value!='不出')||(player3.buffer.length&&player3.buffer[0].value!='不出')" @click="chuPai(false)" size="mini" type="warning">不出</button>
				<button :disabled="!go" @click="chuPai(true)" style="margin-left: 2vw;" size="mini" type="primary">出牌</button>
			</view>
		</view>
		<view v-if="gameStart" :style="{'width':player2.cards.length*upx2px(20)+upx2px(50)+'px'}" class="cardlist">
			<image @click.stop="chooseCard(v,i)" :class="{'choose_card':v.choose}" :style="cardStyle(v,i)" class="card" v-for="(v,i) in player2.cards" :key="i" :src="`/static/pkp/${v.type}_${v.value}.jpg`"></image>
		</view>
		<view v-if="!gameStart" class="ready">
			<button @click="ready(true)" v-if="!player2.ready" type="primary">准备</button>
			<button @click="ready(false)" v-if="player2.ready" type="warn">取消准备</button>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import { card_type,card_value } from '../../lib/rules.js'
	import { setCardBufferSort } from '../../lib/tools.js'
	import Timer from '../Timer.vue'
	export default {
		name:"player",
		components:{
			Timer
		},
		data() {
			return {
				go:false,
				chooseCards:[],
			};
		},
		computed:{
			...mapState(['player2','player1','player3','isChooseLandlord','socket','currentScore','gameStart']),
		},
		methods:{
			...mapMutations(['setPlayerProp', 'setProps' , 'setPlayersProps']),
			upx2px(px){
				return uni.upx2px(px);
			},
			cardStyle(v,index){
				return {
					'left':index*uni.upx2px(20)+'px'
				}
			},
			pkPath(path){
				return require(path);
			},
			//准备
			ready(n){
				uni.sendSocketMessage({
					data:JSON.stringify({
						cmd:'ready',
						data:{
							userid:this.player2.id,
							isReady:n
						}
					})
				})
			},
			//时间到
			timeout(){
				let player1Cards = this.$store.state.player1.buffer;
				let player3Cards = this.$store.state.player3.buffer;
				let player1CardsVal = player1Cards.map(v => v.value);
				let player3CardsVal = player3Cards.map(v => v.value);
				if((player1CardsVal.length&&player1CardsVal[0]!='不出')||(player3CardsVal.length&&player3CardsVal[0]!='不出')){
					this.chuPai(false);
				}else{
					
					let card = this.player2.cards[this.player2.cards.length-1];
					this.player2.buffer = [card];
					uni.sendSocketMessage({
						data:JSON.stringify({
							cmd:'go',
							data:{
								userid:this.player2.id,
								cards:this.player2.buffer
							}
						})
					})
					this.player2.cards.pop();
				}
			},
			//叫分
			sendScore(score){
				uni.sendSocketMessage({
					data:JSON.stringify({
						cmd:'playerToScore',
						data:{
							userid:this.player2.id,
							score:score
						}
					})
				})
			},
			//选择牌
			chooseCard(item,index){
				if(!this.player2.isCurrent) return;
				item.choose = !item.choose;
				// this.$set(this.cards[index],'choose',item.choose);
				this.player2.cards.splice(index,1,item);
				this.chooseCards = this.player2.cards.filter(item => item.choose)
				setCardBufferSort(this.chooseCards)
				let chooseVal = this.chooseCards.map(v => v.value)
				let type = card_type(chooseVal)
				if (type) {
					let player1Cards = this.$store.state.player1.buffer;
					let player3Cards = this.$store.state.player3.buffer;
					let player1CardsVal = player1Cards.map(v => v.value);
					let player3CardsVal = player3Cards.map(v => v.value);
					if(player1CardsVal[0]=='不出'||(!player1CardsVal.length)){
						if(player3CardsVal[0]=='不出'||(!player3CardsVal.length)){
							this.go = true;
						}else{
							let player3type = card_type(player3CardsVal);
							if(player3type=='KingBoom'){
								this.go = false;
								return;
							}else if(player3type!='Boom'&&type=='Boom'){
								this.go = true;
								return;
							}else if(type=='KingBoom'){
								this.go = true;
								return;
							}
							if(type==player3type){
								//判断大小
								if(!card_value(type,player3CardsVal,chooseVal)){
									this.go = true;
								}else{
									this.go = false;
								}
							}
							
						}
					}else{
						let player1type = card_type(player1CardsVal);
						if(player1type=='KingBoom'){
							this.go = false;
							return;
						}else if(player1type!='Boom'&&type=='Boom'){
							this.go = true;
							return;
						}else if(type=='KingBoom'){
							this.go = true;
							return;
						}
						if(type==player1type){
							//判断大小
							console.log(player1CardsVal,chooseVal)
							if(!card_value(type,player1CardsVal,chooseVal)){
								this.go = true;
							}else{
								this.go = false;
							}
						}else{
							this.go = false;
						}
						
					}
				} else {
					this.go = false;
				}
			},
			chuPai(n){
				if(!n){
					this.$set(this.player2,'buffer',[{value:'不出',choose:false}])
					for(let i=0;i<this.player2.cards.length;i++){
						if(this.player2.cards[i].choose){
							this.$set(this.player2.cards[i],'choose',false);
						}
					}
				}else{
					this.player2.cards = this.player2.cards.filter(v=>!v.choose)
					this.player2.buffer = this.chooseCards.map(v => {
						v.choose = false;
						return v
					})
				}
				this.go = false;
				uni.sendSocketMessage({
					data:JSON.stringify({
						cmd:'go',
						data:{
							userid:this.player2.id,
							cards:this.player2.buffer
						}
					})
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.player{
	height: 30vh;
	position: relative;
	.user_info{
		position: absolute;
		padding: 10upx 0;
		display: flex;
		align-items: center;
		.user_text{
			margin-left: 10upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.score{
				color: blue;
				font-size: 15upx;
			}
			.username{
				color: white;
				font-size: 15upx;
			}
		}
		image{
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			border: 4upx solid rgba(0,0,0,0);
		}
		.current{
			border-color: yellow;
		}
	}
	.control_wrap{
		height: 9vh;
		position: relative;
		.timer{
			position: absolute;
			width: max-content;
			font-size: 30px;
			color: orange;
			left: 50%;
			top: -1vh;
			transform: translateX(-50%);
		}
		.controls,.scores{
			text-align: right;
			padding-right: 100upx;
		}
		.scores{
			button{
				margin-left: 10upx;
			}
		}
	}
	.bufferlist{
		height: 20vh;
		position: fixed;
		bottom: 35vh;
		left: 50%;
		transform: translateX(-50%);
		.card{
			width: 50upx;
			height: 100%;
			position: absolute;
		}
		text{
			position: absolute;
			width: max-content;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			color: orange;
			font-size: 30upx;
		}
		
	}
	.cardlist{
		height: 20vh;
		margin: auto;
		position: relative;
		.card{
			width: 50upx;
			height: 100%;
			position: absolute;
		}
		.card:first-of-type{
			margin-left: 0;
		}
		.choose_card{
			top: -20upx;
		}
	}
	.ready{
		display: flex;
		justify-content: center;
		align-items: center;
		button{
			width: 150upx;
		}
	}
}
</style>
